<template>
  <div class="about" :style="{ 'background': ground_color  }">
    <!-- # 标题 -->
    <div class="tabbar" :style="{ 'background': background_color  }">
        <span>小小笔记本</span>
        <div class="right_wrappered">
            <router-link class="selection" to="/"><i class="el-icon-s-promotion "></i>首页</router-link>
            <div class="selection img_wrapper">
                <img class="head_img selection" :src="imgUrl" alt="">
                &nbsp;{{ name }}
            </div>
        </div>
    </div>

    <div class="drop haha_about" :style="{ 'background': background_color,'color': font_color  }">
        <div class="h1_of_about">
          <h1>关于本网站诞生的时间线：</h1>
        </div>
        <div class="gujia">
          <el-timeline>
            <el-timeline-item color="#04B486" timestamp="2021/8/11" placement="top">
              <el-card>
                <h4>零碎的完善</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/8/7" placement="top">
              <el-card>
                <h4>首页的重新定制，分页等</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/8/6" placement="top">
              <el-card>
                <h4>完成文章上传功能，以及改进</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/8/5" placement="top">
              <el-card>
                <h4>设计文章分类与类别展示</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/7/29" placement="top">
              <el-card>
                <h4>写文章页面设计完成</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/7/27" placement="top">
              <el-card>
                <h4>上传、修改头像成功</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/7/16" placement="top">
              <el-card>
                <h4>后端服务器上传图片测试成功</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/7/5" placement="top">
              <el-card>
                <h4>写好头像上传前端界面和后端接口</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/6/18" placement="top">
              <el-card>
                <h4>搭建好阿里云服务器和fastdfs分布式文件服务器</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/6/14" placement="top">
              <el-card>
                <h4>完成个人中心的页面设计</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/6/13" placement="top">
              <el-card>
                <h4>实现了用户注册、用户登录、登录后状态保持的功能</h4>
              </el-card>
            </el-timeline-item>
            <el-timeline-item color="#04B486" timestamp="2021/6/11" placement="top">
              <el-card>
                <h4>设计好了首页，以及首页主题的变化</h4>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
    </div>

  </div>
</template>

<script>
import { color,host } from '../network/color_check.js';
import Cookies from 'js-cookie';
import Qs from 'qs'
import axios from 'axios';

export default {
    data() {
      return {
        name: '',
        imgUrl: '',
        ground_color: '#f4f4f4', // 背景色 #f4f4f4是原来的颜色，#22303f是暗黑色, 
        background_color: 'white', // 元素的背景颜色，white, #18222d!important
        font_color: 'black',
        a_color: 'pink',
        tabbar_color: 'pink',
        write_color: '#eff7ff', // #18222d!important
      }
    },
    created() {
      var a = Cookies.get();
        // 遍历cookie的值
        for(let key in a){
            // console.log(key);
            if( a[key] === '1' ) {
                this.name = key;
                break;
            }
        }
        this.imgUrl= '';
        // 获取头像
        if( Cookies.get('img_url') ) {
            this.imgUrl = Cookies.get('img_url');
        } else if (this.name){
            this.$message.error("获取头像失败");
        }
        
        this.ground_color = color.ground_color;
        this.background_color = color.background_color;
        this.font_color = color.font_color;
        this.tabbar_color = color.tabbar_color;
        this.a_color= color.a_color;
        this.write_color = color.write_color;
        this.value = color.value;
    },
    methods: {
      
    }
}
</script>

<style>
.h1_of_about {
  margin-top: 20px;
  font-size: 25px;
  margin-left: 20px;
}
.el-card {
  background-color: transparent;
  border: 0px;
  color: #17a2b8!important;;
}
.el-timeline-item__timestamp {
  color: orange;
}
.gujia {
  margin: 20px;
}
.haha_about {
  margin: 0 auto;
  width: 65%;
}
</style>